<template>
  <el-form
    ref="refControl"
    class="demo-form-inline"
    v-bind="$attrs"
    :model="model"
    :inline="false"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
  >
      <el-row :gutter="15">
        <el-col :span="cardSpan"
          v-for="(item, index) in cardOrder" :key="index"
        >
          <el-card class="box-card" style="margin-bottom: 10px;">
            <template #header>
              <div class="card-header">
                <span>{{item.title}}</span>
              </div>
            </template>
            <base-item :colOrder="item.colIds" ></base-item>
          </el-card>    
        </el-col>
      </el-row>
  </el-form>
</template>

<script setup lang="ts" generic="T extends object">
/* eslint-disable vue/no-setup-props-destructure */
  import { computed } from 'vue'
  // 表单组件的接口
  import type { IFromProps } from '../map'

  //  封装 el-form-item
  import baseItem from './base-item.vue'

  // 表单控件的属性 
  import { formController, myExpose } from '../map'
  
  defineOptions({
    name: 'el-from-card',
    inheritAttrs: false,
  })

  const props = withDefaults(defineProps<IFromProps<T>>(), {
    labelSuffix: '：',
    labelWidth: '130px'
  })

  // 获取 $ref
  const { refControl, expose } = myExpose()
  // 暴露 el-form
  defineExpose({ expose })

  formController(props)

  // 获取属性
  const {
    subMeta // 获取分栏信息
  } = props.formMeta // 解构表单的meta，得到 colOrder、itemMeta 等。

  const cardOrder = subMeta.cols ?? []

  // 设置card 的列数
  const cardSpan = computed(() => 24 / (subMeta.cardColCount ?? 1) )
       
</script>